<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 10px solid rebeccapurple;
        background-color: rgb(201, 40, 187);
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      我是内容 我是内 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容容
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容 我是内容 我是内容
    </div>
    <script>
      let box = document.querySelector(".box");
    //   console.log(box.clientHeight);
    //   console.log(box.scrollHeight);

      box.onscroll = function () {
        console.log(box.scrollTop);
      };
    </script>
  </body>
</html>
